/**
 * 渠道操作发布记录详情
 */
import React from 'react';
import { Card, Row, Col, Spin, message, Icon } from 'antd';
import { PageContainer } from '@/molecules';
import { useRequest } from '@/hooks';
import { DemandDetail, PublishDetail, RecordDetailHunt } from './containers';
import { getOuterResumeDetail } from './service';

const RecordDetail = ({ location }) => {
    const { query } = location;

    const { data: outerDetail, loading: outerLoading, run: fetchOuter } = useRequest(
        () => getOuterResumeDetail(query?.id),
        {
            manual: true,
            formatResult: res => {
                if (res) {
                    const { code, data, msg } = res;
                    if (code === 10000) {
                        const { channelRecruitInfo = '', outwardInfo = '', salaryCurrencyCode } = data;
                        let tempChannelInfo = null;
                        let tempOutwardInfo = null;
                        if (channelRecruitInfo) {
                            try {
                                tempChannelInfo = JSON.parse(channelRecruitInfo);
                            } catch (error) {
                                console.log(error);
                            }
                        }
                        if (outwardInfo) {
                            try {
                                tempOutwardInfo = JSON.parse(outwardInfo);
                            } catch (error) {
                                console.log(error);
                            }
                        }
                        return {
                            ...data,
                            channelRecruitInfo: tempChannelInfo,
                            outwardInfo: tempOutwardInfo,
                            salaryCurrencyCode
                        };
                    }
                    message.error(msg);
                }
                return undefined;
            }
        }
    );

    React.useEffect(() => {
        if (query?.id) {
            fetchOuter();
        }
    }, [query]);
    const isInner = outerDetail?.channelCode === 'official_website' || outerDetail?.channelCode === 'wechat_public';
    return (
        <>
            {query?.channelType ? (
                <PageContainer title="岗位发布记录">
                    <Spin spinning={outerLoading}>
                        <RecordDetailHunt data={outerDetail} />
                    </Spin>
                </PageContainer>
            ) : (
                <div style={{ margin: '16px' }}>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Card
                                bordered={false}
                                loading={outerLoading}
                                title={
                                    <>
                                        {outerDetail?.abnormalCause && (
                                            <div
                                                style={{
                                                    color: '#f5222d',
                                                    whiteSpace: 'normal',
                                                    wordBreak: 'break-all'
                                                }}
                                            >
                                                <Icon type="exclamation-circle" style={{ marginRight: 8 }} />
                                                对方系统反馈发布失败原因：{outerDetail?.abnormalCause}
                                            </div>
                                        )}
                                        <div style={{ margin: '10px 0' }}>岗位对外信息</div>
                                    </>
                                }
                            >
                                <DemandDetail
                                    salaryCurrencyCode={outerDetail?.salaryCurrencyCode}
                                    data={outerDetail?.outwardInfo || {}}
                                />
                            </Card>
                        </Col>

                        <Col span={12}>
                            <Card
                                title={<div style={{ margin: '10px 0' }}>渠道发布信息</div>}
                                bordered={false}
                                loading={outerLoading}
                                extra={
                                    outerDetail?.channelLogoUrl && (
                                        <img
                                            style={{
                                                height: 44,
                                                borderRadius: 4
                                            }}
                                            alt=""
                                            src={outerDetail?.channelLogoUrl}
                                        />
                                    )
                                }
                            >
                                {isInner ? (
                                    <DemandDetail
                                        salaryCurrencyCode={outerDetail?.salaryCurrencyCode}
                                        data={outerDetail?.channelRecruitInfo}
                                    />
                                ) : (
                                    outerDetail && (
                                        <PublishDetail
                                            data={outerDetail}
                                            salaryCurrencyCode={outerDetail?.salaryCurrencyCode}
                                        />
                                    )
                                )}
                            </Card>
                        </Col>
                    </Row>
                </div>
            )}
        </>
    );
};

export default RecordDetail;
